<template>
	<view class="live-content">
		<view class="live-menu-box">
			<view class="menu-box">
				<view class="menu-item" v-for="(item,index) in menuList" :key="index" @click="gotoMenu(item.url)">
					<image :src="item.image" mode=""></image>
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="live-goods">
			<view class="live-item" v-for="(item,index) in liveList" :key="index" @click="gotoDirectory(item.id)">
				<image :src="item.full_cover" mode=""></image>
				<view class="title">{{item.title}}</view>
				<view class="live-price">
					<view>定价 <text>{{item.price}}</text> 元 </view>
					<view v-if="item.is_pay == 0">购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getlivelist } from '@/api/live.js'
	export default {
		data() {
			return {
				liveList: [],
				menuList: [{
						image: '../../static/index/组 3.png',
						name: '证照资质',
						url:'/pagesA/liveRich/index?type=1'
					},
					{
						image: '../../static/index/组 3(1).png',
						name: '平台简介',
						url:'/pagesA/liveRich/index?type=2'
					},
					{
						image: '../../static/index/组 3(2).png',
						name: '知识付费',
						url:'/pagesA/liveRich/index?type=3'
					},
					{
						image: '../../static/index/组 3(3).png',
						name: '直播特点',
						url:'/pagesA/liveRich/index?type=4'
					},
					{
						image: '../../static/index/组 3(4).png',
						name: '效益分析',
						url:'/pagesA/liveConsult/index'
						// url:'/pagesA/liveRich/index?type=5'
					},
					{
						image: '../../static/index/组 3(5).png',
						name: '讲师入驻',
						url:'/pagesA/settled/index'
					},
					{
						image: '../../static/index/组 3(6).png',
						name: '直播咨询',
						url:'/pagesA/liveConsult/index'
					}
				]
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init(){
				let that = this
				getlivelist().then(res=>{
					// console.log(999,res.data.data);
					that.liveList = res.data.data
				})
			},
			gotoMenu(url){
				uni.navigateTo({
					url
				})
			},
			gotoDirectory(id) {
				uni.navigateTo({
					url: '/pagesA/liveDirectory/index?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.live-menu-box {
		background-color: #2AC092;
		height: 200rpx;
		width: 100%;
		position: relative;

		.menu-box {
			position: absolute;
			top: 20rpx;
			left: 2%;
			width: 96%;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 30rpx 40rpx;
			display: flex;
			flex-wrap: wrap;

			.menu-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 12rpx 24rpx;

				>image {
					width: 96rpx;
					height: 96rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}

	.live-goods {
		margin-top: 240rpx;
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;


		.live-item {
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			overflow: hidden;
			background-color: #fff;

			>image {
				height: 230rpx;
				width: 345rpx;
			}

			>view {
				padding: 10rpx 20rpx;
			}
			.title{
				max-width: 360upx;
			}
			.live-price {
				display: flex;
				justify-content: space-between;

				>view:nth-child(1) {
					color: #FF6D6A;
					font-size: 28rpx;

					>text {
						font-size: 36rpx;
					}
				}

				>view:nth-child(2) {
					background-color: #2AC092;
					width: max-content;
					padding: 10rpx 20rpx;
					border-radius: 50rpx;
					color: #fff;
				}
			}
		}
	}
</style>